<template>
  <div class="home">
    <nav class="nav">
      <div class="left">
        附近店铺
      </div>
      <router-link :to="{name:'search'}">
<van-search  v-model="navValue" disabled  shape="round" background="#d0021b" placeholder="搜索中酒网商品/店铺" />
      </router-link>
      
      <img src="../assets/img/tabbar/home_banner_bg@2x.png" alt="">
      <!-- 轮播 -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
      <!-- 轮播end -->
    </nav>
    <!-- 导航 -->
    <div class="daohang" v-if="allData.length">
      <van-grid :gutter="5" :column-num="5" v-if="allData[1].ShopCustomTemplates">
        <van-grid-item v-for="value, index in allData[1].ShopCustomTemplates" :key="index" :icon="value.Image"
          :text="value.Subject" />
      </van-grid>
    </div>
    <!-- end -->
    <!-- 专场 -->
    <div class="zhuanchuang"  v-if="allData.length">
      <div class="item" v-for="item, index in  allData[2].ShopCustomTemplates" :key="item + index">
        <div class="left">
          <img :src="item.Image" alt="">
        </div>

        
        <div class="right">
          <h3>{{ item.MainTitle }}</h3>
          <p> {{ item.Subheading }}</p>
          <div>进入专区<span>
              <svg t="1668931803846" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="3843" width="32" height="32">
                <path
                  d="M512 64c-247.039484 0-448 200.960516-448 448S264.960516 960 512 960 960 759.039484 960 512 759.039484 64 512 64zM661.760516 535.967531l-160.25545 158.495686c-6.239161 6.14455-14.368821 9.247789-22.496761 9.247789-8.255235 0-16.512189-3.168606-22.751351-9.504099-12.416396-12.576374-12.320065-32.800753 0.25631-45.248112l137.407768-135.904314-136.287918-136.671523c-12.480043-12.512727-12.447359-32.768069 0.063647-45.248112 12.512727-12.512727 32.768069-12.447359 45.248112 0.063647l158.911974 159.359226c0.032684 0.032684 0.032684 0.063647 0.063647 0.096331s0.063647 0.032684 0.096331 0.063647c2.94326 2.975944 5.055665 6.431824 6.591802 10.047682 0.063647 0.127295 0.223626 0.25631 0.25631 0.383604C673.600645 512.767209 671.231931 526.592447 661.760516 535.967531z"
                  p-id="3844" fill="#d81e06"></path>
              </svg>
            </span></div>
        </div>
      </div>
    </div>
    <!-- end -->
    <!-- 超值拼团 -->
    <div class="pingtuan"  v-if="allData.length">
      <div>
        <img :src="allData[3].ShopCustomTemplates.Pic[0]" alt="">
      </div>
      <div class="iteams">
       
        <div class="iteam" v-for="item in allData[3].ShopCustomTemplates.List" :key="item.ProductDefaultImage">
          <router-link :to="{name:'detail',params:{id:item.ActiveId}}">
            <div class="top">
            <img :src="item.ProductDefaultImage" alt="">
          </div>

          <div>
            <p>{{ item.ProductName }}</p>
            <div>
              <span class="fist">￥{{ item.MiniGroupPrice }}</span>
              <span class="second">￥{{ item.MiniSalePrice }}</span>
            </div>
          </div>

</router-link>
         
        </div>
      </div>

    </div>
    <!-- 超值拼团 End-->
    <!-- 限时秒杀 -->
      <div class="miaosha"  v-if="allData.length">
      <div class="iteams">
        <div class="iteam" v-for="item in allData[5].ShopCustomTemplates.ProductModuleItems" :key="item.Id">
          <router-link :to="{name:'detail',params:{id:item.Id}}">
            <div class="top">
            <img :src="item.Image" alt="">
          </div>

          <div>
            <p>{{ item.Subject }}</p>
            <div>
              <span class="fist">￥{{ item.Price }}</span>
             
            </div>
          </div>
          </router-link>
         

        </div>
      </div>
      </div>
    <!-- 限时秒杀 End-->
    <!-- 列表12 -->
    <div class="list12"  v-if="allData.length">
      <div class="items">
        <div class="item" v-for="item in allData[9].ShopCustomTemplates.ProductModuleItems" :key="item.Id">
          <router-link :to="{name:'detail',params:{id:item.Id}}">
            <div class="img">
            <img :src="item.Image" alt="">
          </div>
          <div class="text">
            <p>{{ item.Subject }}</p>
            <div class="price">
              ￥ <span>{{ item.Price }}</span>
            </div>
          </div> 
          </router-link>
         
        </div>
      </div>
    </div>
    <!-- 列表12 End-->
    <!-- 猜你喜欢 -->
    <div class="cainixihuan"  v-if="allData.length">
      <div class="top">
        <img :src="allData[10].ShopCustomTemplates.Pic[0]" alt="">
      </div>
      <div class="items">
        <div class="item" v-for="item in allData[10].ShopCustomTemplates.List" :key="item.Image" :title="item">
          <router-link :to="{name:'detail',params:{id:item.Id}}">
            <div class="img">
            <img :src="item.Image" alt="">
          </div>
          <div class="text">
            <p>{{ item.Subject }}</p>
            <div class="price">
              ￥ <span>{{ item.Price }}</span>
            </div>
          </div>
          </router-link>
         
        </div>
      </div>

    </div>
    <!-- 猜你喜欢 End-->
  </div>
</template>

<script>
// @ is an alias to /src
import { Toast } from 'vant';
export default {
  created() {
    this.$api.sentPost().then(res => {
      console.log(res,'这是首页数据');
      this.allData = res.Data
    })
  },
  data() {
    return {
      navValue: '',
      images: [
        require('@/assets/img/home/swppier/lun1.jpg'),
        require('@/assets/img/home/swppier/lun2.png'),
        require('@/assets/img/home/swppier/lun3.jpg'),
      ],
      allData: {},

    }
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast('取消');
    },

  },
}
</script>
<style lang="less" scoped>
.home {
  margin-bottom: 20%;
}

.nav {
  position: relative;

  .left {
    float: left;
    width: 26%;
    height: 54px;
    line-height: 54px;
    font-size: 16px;
    background: rgb(208, 2, 27);
    display: inline-block;
    color: #fff;
  }

  .van-search {
    display: inline-block;
    background: rgb(208, 2, 27);
    width: 74%;
    float: right;
  }

  // 轮播
  .van-swipe {
    position: absolute;
    top: 33%;
    left: 5%;
    right: 5%;
    border-radius: 20px;
    font-size: 0;
    overflow: hidden;

    .van-swipe-item {
      color: #fff;
      // font-size: 20px;
      // line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
      width: 100%;
      height: 100%;

      img {
        width: 100% !important;
        height: 100% !important;
      }
    }
  }

}

// 轮播end
//导航
.daohang {
  margin-top: 80px;

  .van-grid-item {
    width: 15%;
    padding-left: 1px;
  }
}

// end
// 专场
.zhuanchuang {
  background-color: #f6f6f6;
  display: flex;
  flex-wrap: wrap;
  position: relative;

  .item {
    background-color: #fff;
    margin: 1px;
    border-radius: 10px;
    margin-left: 10px;
    display: inline-block;
    width: 50%;
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;

    .left {

      width: 45%;
    }

    .right {
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      width: 45%;
      font-size: 16px;

      h3 {
        font-size: 16px;
      }

      p {
        font-size: 10px;
        color: #959595;
      }

      div {
        display: flex;
        justify-content: space-evenly;
        align-items: center;

        span {
          display: inline-block;
          width: 16px;
          padding-top: 7px;

          svg {
            width: 100%;
            height: 100%;
          }
        }
      }

    }
  }

  .item:last-child {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0px;
    left: 51.5%;
    align-items: center;
    height: 98%;
   
    width: 44%;

  }
}

//end
// 限时秒杀
.miaosha{
  background-color: #f6f6f6;
  .iteams {
    margin: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: space-evenly;
    flex: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    
    .iteam {
      width: 200px;
      font-size: 16px;
      color: #1f1f1f;
      text-align: left;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;

      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: pre-line;
      flex-direction: column;
    justify-content: space-around;
    padding-top: 8px;



      p {

        width: 100%;
        height: 37px;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: pre-line;
      }

      .second {
        color: #959595;
        text-decoration: line-through;
      }

      .fist {
        color: red;
      }

      img {
        width: 100px;
      }
    }
  }
}
// end
//拼团
.pingtuan {
  background-color: #f6f6f6;
  .iteams {
    margin: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: space-evenly;

    .iteam {
      font-size: 16px;
      color: #1f1f1f;
      text-align: left;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;

      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: pre-line;

      p {

        width: 100%;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: pre-line;
      }

      .second {
        color: #959595;
        text-decoration: line-through;
      }

      .fist {
        color: red;
      }

      img {
        width: 100px;
      }
    }
  }

}

// end
//列表12
.list12 {
  background-color: #f6f6f6;

  .items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

    .item {
      padding: 7px;
      margin-top: 10px;
      border-radius: 10px;
      background-color: #fff;

      width: 30%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;

      .img {
        margin-bottom: 10px;
        border-radius: 10px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .text {
        text-align: left;
        margin-bottom: 10px;

        p {
          width: 100%;
          display: -webkit-box;
          overflow: hidden;
          font-size: 16px;

          height: 56px;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          white-space: pre-line;

        }

        .price {
          color: red;
          margin-top: 10px;

        }
      }
    }
  }
}

// end
//猜你喜欢
.cainixihuan {
  background-color: #f6f6f6;

  .items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

    .item {
      padding: 7px;
      margin-top: 10px;
      border-radius: 10px;
      background-color: #fff;

      width: 45%;

      .img {
        margin-bottom: 10px;
        border-radius: 10px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .text {
        text-align: left;
        margin-bottom: 10px;

        p {
          font-size: 16px;
        }

        .price {
          color: red;
          margin-top: 10px;

        }
      }
    }
  }
}

// end
</style>
